<%- include('header') -%>
<div class="container-fluid">
    <form class="row sticky-top blur-bg-style" style="top:56px;" action="/battlegrounds" type="get">
        <div class="col-auto">
            <input type="text" readonly class="form-control-plaintext" id="cardCount"
                   value="共<%= data.ret.cardCount %>张卡背图案">
        </div>
        <div class="col-auto">
            <input type="text" value="<% queryParam.textFilter %>" name="textFilter" class="form-control"
                   id="textFilter" placeholder="输入卡背名称查询">
        </div>
        <div class="col-auto">
            <select name="cardBackCategory" class="form-select" aria-label="所有">
                <% data.HsCardBacksCategory.forEach(it=>{ %>
                    <option value="<%= it.value %>"><%= it.label %></option>
                <% }) %>
            </select>
        </div>

        <div class="col-auto">
            <button type="submit" class="btn ">搜索</button>
        </div>
    </form>
    <% if(code === 0){ %>
        <div class="row">
            <% data.ret.cardBacks.forEach(it=>{ %>
                <div class="col-6 col-sm-6 col-md-3 col-lg-2 ">
                    <div class="flex flex-column align-items-center">
                        <img loading="lazy" data-src="<%= it.image %>" class="img-fluid" alt="<%= it.name %>"/>
                        <p class="fs-6 fw-semibold"><%= it.name %></p>
                        <p class="fs-6 "><%- it.text %></p>
                    </div>
                </div>
            <% }) %>
        </div>
    <% }else{ %>
        <p>获取数据失败</p>
    <% } %>
</div>
<%- include('footer') -%>
